<script setup lang="ts">
import {
  putMemberAddressAPI,
  getMemberAddressDetailAPI,
  postMemberAddressAPI,
} from '@/services/address'
import type { AddressParams } from '@/types/address'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 技巧: 处理跳转到同一个页面，但内部需要区分是何种操作，可以通过给路由选择性传参数区分

// 查询参数
const query = defineProps<{
  id?: string
}>()

// 动态设置导航栏标题
uni.setNavigationBarTitle({
  title: query.id ? '修改地址' : '新建地址',
})

// 表单数据
const form = ref<AddressParams>({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

// 选择地区的时
const onRegionChange: UniHelper.RegionPickerOnChange = (e) => {
  // 保存完整地址
  form.value.fullLocation = e.detail.value.join(' ')
  // 获取省市区县编码
  const [provinceCode, cityCode, countyCode] = e.detail.code as string[]
  // 保存到form中
  form.value = {
    ...form.value,
    provinceCode,
    cityCode,
    countyCode,
  }
}

// 默认状态变化时
const onDefaultChange: UniHelper.SwitchOnChange = (e) => {
  // 同步默认状态
  form.value.isDefault = e.detail.value ? 1 : 0
}

// 保存
const onSave = async () => {
  if (query.id) {
    // 修改

    // 发请求
    await putMemberAddressAPI(query.id, form.value)
    // 提示
    uni.showToast({
      title: '修改成功',
      icon: 'success',
    })
  } else {
    // 新增

    try {
      // 发请求
      await postMemberAddressAPI(form.value)
      // 提示
      uni.showToast({
        title: '新增成功',
        icon: 'success',
      })
    } catch (e: any) {
      uni.showToast({
        title: '地址不能超过10个',
        icon: 'none',
      })
    }
  }

  setTimeout(() => {
    // 延迟返回上一页
    uni.navigateBack()
  }, 500)
}

// 基于id获取地址详情
const getMemberAddressDetailData = async () => {
  if (!query.id) return
  // 赋值给表单对象，做回显
  form.value = await getMemberAddressDetailAPI(query.id)
}

onLoad(() => {
  getMemberAddressDetailData()
})
</script>

<template>
  <view class="content">
    <form>
      <!-- 表单内容 -->
      <view class="form-item">
        <text class="label">收货人</text>
        <input
          class="input"
          placeholder="请填写收货人姓名"
          v-model="form.receiver"
        />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input
          class="input"
          placeholder="请填写收货人手机号码"
          v-model="form.contact"
        />
      </view>
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker
          @change="onRegionChange"
          class="picker"
          mode="region"
          :value="form.fullLocation.split(' ')"
        >
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view
            v-else
            class="placeholder"
            >请选择省/市/区(县)</view
          >
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input
          class="input"
          placeholder="街道、楼牌号等信息"
          v-model="form.address"
        />
      </view>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch
          class="switch"
          color="#27ba9b"
          :checked="true"
          @change="onDefaultChange"
        />
      </view>
    </form>
  </view>
  <!-- 提交按钮 -->
  <button
    class="button"
    @tap="onSave"
  >
    保存并使用
  </button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
